<script setup>
import { computed } from 'vue'
import Container from './Container.vue'
import NavLink from './NavLink.vue'

const footerLinks = computed(() => [
  { label: '首页', href: route('blog.home') },
  { label: '归档', href: route('blog.archive') },
  { label: '系列', href: route('blog.series.index') },
  { label: '项目', href: route('blog.projects') },
  { label: '关于', href: route('blog.about') }
])
</script>

<template>
  <footer class="mt-32 flex-none">
    <Container class="">
      <div class="border-t border-zinc-100 pt-10 pb-16 dark:border-zinc-700/40">
        <div class="flex flex-col items-center justify-between gap-6 md:flex-row">
          <div class="flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm font-medium text-zinc-800 dark:text-zinc-200">
            <NavLink
              v-for="item in footerLinks"
              :key="item.href"
              :href="item.href"
            >
              {{ item.label }}
            </NavLink>
          </div>
          <p class="text-sm text-zinc-400 dark:text-zinc-500">
            &copy; {{ new Date().getFullYear() }} Cola. 保留所有权利。
          </p>
        </div>
      </div>
    </Container>
  </footer>
</template>
